Design Guidelines for Input Steppers輸入步進器

輸入步進器是一種用於增減數值的使用者介面控制元件，透過單次點選即可調整數值，減少使用者輸入成本。然而，對於數值變化範圍大的場景，步進器並不是理想的選擇。

什麼是輸入步進器？

定義：輸入步進器是一個兩部分組成的控制元件，用於逐步增加或減少數值。

GUI中的表現：通常有水平和垂直兩種形式。

工作方式：步進器是一種相對控制元件，使用者的每次操作會按固定步長調整當前值，與使用者手動輸入絕對值（如直接輸入數值）不同。

使用輸入步進器的優勢

1. 無需鍵盤輸入

在某些無鍵盤的裝置（如手機、資訊終端）上，步進器可以降低輸入難度，尤其適合對預設值進行小幅調整的場景。

案例：Kayak使用步進器調整旅客人數，避免繁瑣的鍵盤輸入。

2. 使用直觀

常見佈局：

文化差異：佈局應反映使用者的文化習慣。例如，阿拉伯語系統會將加減號反轉佈局以適應從右至左的閱讀習慣。

3. 低互動成本

對於小範圍調整，步進器需要更少的操作步驟。

案例比較：Delta Airlines移動應用允許使用者透過單次點選增加旅客人數，互動成本顯著低於使用下拉選單或文字框。

4. 相對控制元件適合不確定的精確值

使用者不需要提前知道確切數值，僅需決定是增加還是減少，例如調整文字大小的快捷鍵（Ctrl+加號/減號）。

使用輸入步進器的侷限性

1. 按鈕難以點選

步進器按鈕通常較小，位置緊湊，容易引發誤操作。

案例：Sketch的垂直步進器按鈕過小，使用者需要精確操作才能避免點選錯誤。

2. 不適合大幅度調整

當數值需要從1調整到50時，頻繁點選步進器會讓使用者感到厭煩。步進器更適合數值範圍明確且大部分使用者僅需小幅調整的場景。

輸入步進器設計指南

1. 適用場景

推薦使用：數值欄位有明確的預設值，大部分輸入僅需小幅調整（如旅客人數）。

避免使用：數值範圍廣，使用者輸入值差異較大（如年齡或日期）。

2. 預設值設定

設定大多數使用者選擇的值為預設值。例如：旅客人數預設值為1。餐廳預訂人數預設值為2。

3. 避免用於連續值

步進器僅適合離散值場景，對於連續值（如價格或距離），使用者可能需要更靈活的輸入方式。

案例：房地產網站中價格欄位的步長若固定為10萬美元，可能限制使用者輸入準確值，文字框是更合適的選擇。

4. 明確關聯欄位

突出顯示步進器影響的欄位內容。例如：調整日期和時間時，清晰標記當前被調整的部分。

案例：荷蘭鐵路運營商Ns.nl使用深藍色下劃線標記被調整的時間欄位。

5. 提供足夠大的按鈕

移動裝置：目標區域建議至少為1cm x 1cm。

桌面裝置：即使滑鼠操作更精確，也不應讓按鈕過小。案例：Handshake的步進器按鈕過小，最佳化設計後按鈕更易點選。

6. 優先水平佈局

水平步進器比垂直佈局更易於避免誤觸，尤其是在移動裝置上。

7. 使用常見符號

水平步進器：使用“+”和“-”。

垂直步進器：使用向上/向下箭頭。

8. 新增其他輸入方式

文字框步進器：允許使用者直接輸入值，並透過步進器按鈕進行小幅調整。

長按或連續點選：支援快速增加或減少數值。

鍵盤支援：允許使用者透過鍵盤箭頭鍵調整值。

9. 明確步長和範圍

顯示步長和單位（如美元或百分比）。

顯示最小值和最大值限制，防止使用者超出範圍。案例：Expedia使用灰顯加號表示已達到最大值。

適用輸入步進器的場景

輸入步進器適合用於有明確預設值的數值欄位，使用者通常只需小幅調整。設計時需確保步進器按鈕尺寸合理、功能明確，並在必要時提供多種輸入方式供使用者選擇。